<template>
    <div class="search-add">
        <div class="search-add_label">查询条件：</div>
        <div class="search-add_select">
            <el-select filterable placeholder="请选择报表" clearable>
                <el-option v-for="item in conditionOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </div>
        <div class="search-add_btn">
            <img src="@/assets/images/add-report.svg" class="add-report_icon">
            <div>添加条件</div>
        </div>
    </div>
</template>

<script setup lang="js">
import { ref } from "vue"

const conditionOptions = ref([
    { value: 1, label: "日期" },
    { value: 2, label: "区域" },
    { value: 3, label: "客流数" }
])

</script>
<style scoped lang="scss">
.search-add {
    display: flex;
    align-items: center;

    .search-add_label {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: vw(18);
        color: #FFFFFF;
    }

    .search-add_select {
        width: vw(117);
        margin: 0 vw(14);
    }

    .search-add_btn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(12, 36, 48, 0.54);
        border-radius: vw(8);
        border: 1px dashed #fff;
        box-sizing: border-box;
        margin-left: vw(7);
        padding: vh(3) vw(14);
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: vw(14);
        color: #FFFFFF;
        cursor: pointer;

        .add-report_icon {
            width: vw(28);
            margin-right: vw(4);
        }
    }
}
</style>